<template>
  <AdForm v-bind="fromConfig" v-model="models"></AdForm>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { AdFormPorps } from '@fe-hl/admin-design-vue';
// 模拟数据
interface ListItem {
  value: string;
  label: string;
}
const list = ref<ListItem[]>([]);
const states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware'];
list.value = states.map((item) => {
  return { value: `value:${item}`, label: `label:${item}` };
});
// ------------------------------------------------分割线----------------------------------------------------------------
interface Models {
  status: string;
}
const models = ref<Models>();
const fromConfig: AdFormPorps<Models> = reactive({
  span: 8,
  components: [
    {
      model: 'status',
      components: 'el-select',
      subComponents: 'el-option',
      options: (keyword: string) => {
        // 模拟ajax请求
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(
              list.value.filter((item) => {
                return item.label.toLowerCase().includes(keyword.toLowerCase());
              }),
            );
          }, 1000);
        });
      },
      props: {
        filterable: true,
        remote: true,
        label: '状态',
      },
    },
  ],
  submit: (models) => {
    console.log(models);
  },
  resetForm: () => {
    console.log('resetForm');
  },
});
</script>
